<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@	taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:url var="query_tree" value="/database/queryTree.do" />
<c:url var="home" value="/home/index.do" />
<c:url var="database" value="/database/index.do" />
<c:url var="tableStatus" value="/tableStatus/index.do" />
<c:url var="tableField" value="/tableField/index.do" />
<c:url var="tableData" value="/tableData/index.do" />
<c:url var="sqlCommand" value="/sqlCommand/index.do" />

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>MySQLAdmin</title>
	<link rel="stylesheet" type="text/css" href="../common/easyui/themes/metro-green/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../common/easyui/themes/icon.css" />
	<link rel="stylesheet" type="text/css" href="../common/system.css" />
	<script type="text/javascript" src="../common/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../common/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../common/common.js"></script>
	<script type="text/javascript" src="../common/system.js"></script>
	
	<script>
		$(function(){
			// 初始化当前位置
			var success = initLocation("${serverName}");
			if(success){
				// 初始化树形列表
				initDatabaseTree();
				// 初始化Tab
				initTabs();
				// 更新当前位置显示
				updateTitle('server');
			} else {
				alertErrorMsg();
			}
		});

		// 初始化树形列表
		function initDatabaseTree() {
			$('#db_tree').tree({
				url : '${query_tree}?serverName=' + loc[0],
				method : 'post',
				animate : true,
				onSelect : function(node) {
					// 如果选中的是数据库节点
					if (node.iconCls == 'icon-db') {
						// 切换折叠状态
						$('#db_tree').tree('toggle', node.target);
						// 设置当前位置
						loc[1] = node.text;
						// 打开“数据库表结构”Tab页
						openTableStatusTab();
					}
					// 如果选中的是表节点
					if (node.iconCls == 'icon-table') {
						// 获取父节点
						var parentNode = $('#db_tree').tree('getParent', node.target);
						// 设置当前位置
						loc[1] = parentNode.text;
						loc[2] = node.text;
						// 打开“表数据”Tab页
						openTableDataTab();
					}
				}
			});
		}
		
		// 初始化Tab页
		function initTabs(){
			// 选择第一页
			$('#tabs').tabs('select', 0);
			// 禁用“数据库结构”Tab页
			$('#tabs').tabs('disableTab',2);
			// 禁用“表字段”Tab页
			$('#tabs').tabs('disableTab',3);
			// 禁用“表数据”Tab页
			$('#tabs').tabs('disableTab',4);
			// 更新“数据库”Tab页的href
			$('#tabs').tabs('update', {
				tab : $('#tabs').tabs('getTab', 1),
				options : {
					href : "${database}?serverName=" + loc[0]
				}
			});
		}
		
		// 打开数据库Tab页，展示所有数据库
		function openDatabaseTab() {
			// 更新loc信息
			loc[1] = '';
			loc[2] = '';
			// 更新Tab信息
			$('#tabs').tabs('update', {
				tab : $('#tabs').tabs('getTab', 1),
				options : {
					href : "${database}?serverName=" + loc[0]
				}
			});
			$('#tabs').tabs('select', 0);
			disableTabs();
			$('#tabs').tabs('select', 1);
			// 折叠所有节点
			$('#db_tree').tree('collapseAll');
		}

		// 打开数据库结构Tab页，展示指定数据库下的所有表格
		function openTableStatusTab() {
			// 更新loc信息
			loc[2] = '';
			// 更新Tab信息
			$('#tabs').tabs('update', {
				tab : $('#tabs').tabs('getTab', 2),
				options : {
					href : "${tableStatus}?serverName=" + loc[0] + "&databaseName=" + loc[1]
				}
			});
			$('#tabs').tabs('select', 0);
			disableTabs();
			$('#tabs').tabs('enableTab', 2);
			$('#tabs').tabs('select', 2);
		}

		// 打开表数据Tab页，展示一张表的所有数据
		function openTableDataTab() {
			// 更新Tab信息
			$('#tabs').tabs('update', {
				tab : $('#tabs').tabs('getTab', 3),
				options : {
					href : "${tableField}?serverName=" + loc[0] + "&databaseName=" + loc[1] + "&tableName=" + loc[2]
				}
			});
			$('#tabs').tabs('update', {
				tab : $('#tabs').tabs('getTab', 4),
				options : {
					href : "${tableData}?serverName=" + loc[0] + "&databaseName=" + loc[1] + "&tableName=" + loc[2]
				}
			});
			$('#tabs').tabs('select', 0);
			disableTabs();
			$('#tabs').tabs('enableTab', 2);
			$('#tabs').tabs('enableTab', 3);
			$('#tabs').tabs('enableTab', 4);
			$('#tabs').tabs('select', 4);
		}

		// 更新SQL页面的href
		function updateSqlHref(title,index){
 			$('#tabs').tabs('update', {
				tab : $('#tabs').tabs('getTab', 5),
				options : {
					href : "${sqlCommand}?serverName=" + loc[0] + "&databaseName=" + loc[1] + "&tableName=" + loc[2]
				}
			}); 
		}
	</script>
</head>

<body class="easyui-layout">
	<!-- 树形列表展示 -->
	<div data-options="region:'west',split:true,title:'数据库列表',tools:[{iconCls:'icon-reload',handler:initDatabaseTree}]" style="width:250px;padding:10px;">
		<ul id="db_tree"></ul>
	</div>

	<!-- Tab页展示 -->
	<div data-options="region:'center',title:'<span>当前位置::</span>'">
		<div id="tabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true,onSelect:updateSqlHref">
			<div title="首页" data-options="href:'${home}',selected:true" style="padding:10px"></div>
			<div title="数据库" data-options="href:'${database}',cache:false" style="padding-top:5px;"></div>
			<div title="数据库结构" data-options="href:'${tableStatus}',cache:false" style="padding-top:5px;"></div>
			<div title="表字段" data-options="href:'${tableField}',cache:false" style="padding-top:5px;"></div>
			<div title="表数据" data-options="href:'${tableData}',cache:false" style="padding-top:5px;"></div>
			<div title="SQL" data-options="href:'${sqlCommand}',cache:true" style="padding:10px;"></div>
		</div>
	</div>
</body>
</html>